<template>
  <div>
    <puplic-modal
      width="560px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="publicVisible = false"
      @handleOk="handleOk"
      :title="title"
    >
      <div slot="content">
        <a-form-model :model="form" ref="form" class="formStyle" autocomplete="off" layout="inline" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="区域名称" prop="regionName">
                <a-input placeholder="请输入区域名称" v-model.trim="form.regionName" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="上级区域">
                <a-input placeholder="请选择上级区域" v-model.trim="form.parentRegionName" :disabled="true" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="4">
            <a-col :span="22">
              <a-form-model-item label="经度">
                <a-input placeholder="例如104.123456" v-model.trim="form.lat" />
              </a-form-model-item>
            </a-col>
            <a-col :span="2">
              <img
                @click="showMap"
                class="select-map-img cursor"
                style="width: 36px; height: 36px"
                src="@/assets/imgs/system/in-map.png"
              />
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="纬度">
                <a-input placeholder="例如34.865432" v-model.trim="form.lng" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="4">
            <a-col :span="22">
              <a-form-model-item label="区域边界">
                <a-input placeholder="例：lat:104.123456,lng:34.78908" v-model.trim="form.areaPosition" />
              </a-form-model-item>
            </a-col>
            <a-col :span="2">
              <img
                @click="createBorderLine"
                class="select-map-img cursor"
                style="width: 36px; height: 36px"
                src="@/assets/imgs/system/map-area.png"
              />
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="排序" prop="regionOrder">
                <a-input placeholder="请输入排序值" v-model.trim="form.regionOrder" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="区域简介">
                <a-textarea
                  placeholder="请输入区域简介"
                  style="height: 50px; overflow: auto; resize: none"
                  v-model.trim="form.introduce"
                />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="备注">
                <a-textarea
                  placeholder="请输入备注"
                  style="height: 50px; overflow: auto; resize: none"
                  v-model.trim="form.memo"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </puplic-modal>
    <a-map :visible.sync="isShowMap" @border="getBorder" @getLatLong="getLatLong" ref="aMap"></a-map>
  </div>
</template>
<script>
import { uploadFile, addArea } from '@/api/api'
import AMap from '@/components/a-map/index.vue'
import puplicModal from '@/components/publicModal'
export default {
  components: { puplicModal, AMap },
  name: '',
  data() {
    return {
      title: '新增区域',
      form: {},
      rules: {
        regionName: [{ required: true, message: '请输入区域名称!' }],
        lng: [{ required: true, message: '请输入纬度!' }],
        lat: [{ required: true, message: '请输入经度!' }],
        areaPosition: [{ required: true, message: '请输入区域边界坐标!' }],
        regionOrder: [{ required: true, message: '请输入排序值!' }],
      },
      publicVisible: false,
      imageUrl: [],
      fileList: [],
      showUploadList: {
        showPreviewIcon: false,
      },
      isShowMap: false,
    }
  },
  mounted() {},
  methods: {
    add(records) {
      this.form = { ...records }
      console.log(records, 'records')
      this.fileList = []
      this.publicVisible = true
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }

      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 13)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          this.imageUrl.push(res.result.halfPath)
        }
      }
    },
    uploadChange({ file, fileList }) {
      if (this.isLt2M) {
        file.status = 'done'
        this.fileList = fileList
      }
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        if (this.form.lat == null || this.form.lat == '') {
          this.$message.error('经度不能为空,请选择经维度')
          return
        }
        if (this.form.lng == null || this.form.lng == '') {
          this.$message.error('纬度不能为空,请选择经维度')
          return
        }
        if (this.form.areaPosition == null || this.form.areaPosition == '') {
          this.$message.error('请选择区域边界值')
          return
        }
        addArea(this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success('新增成功!')
            this.$emit('ok')
            this.cancel()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    cancel() {
      this.publicVisible = false
      this.form.resetFields()
    },

    // ! 地图方法开始
    showMap() {
      this.isShowMap = true
    },
    getLatLong(value) {
      this.form.lat = value[0]
      this.form.lng = value[1]
    },
    getBorder(value) {
      this.form.areaPosition = value
    },
    createBorderLine() {
      this.$refs.aMap.borderLine = true
      this.isShowMap = true
    },
    // ! 地图方法结束
  },
}
</script>
<style scoped lang="less">
/deep/ .content {
  padding: 20px;
}
</style>
